import { Button, Form, Input, Row, Select, Space, Table, Image, message, Popconfirm, Pagination } from 'antd';
import React, {  useEffect, useState, type CSSProperties } from 'react';
import {  storesDelete, storesDeleteAll, storeservicesList, storesList } from '../apis/stores';
import type { ScopeServicesList, StoresList } from '../type/stores';
import type { ColumnsType } from 'antd/es/table';

import { useNavigate } from 'react-router-dom';
import Title from '../component/title';
let rootImg = import.meta.env.VITE_API_BASE_IGM
function Stores() {
    let [ids, setIds] = useState<number[]>([])
    let [scopeServices, setScopeServices] = useState<ScopeServicesList[]>([])
    let [searchParam, setSearchParam] = useState<any>({
        page: 1,
        pageSize: 10
    })
    let [counts, setCounts] = useState(0)
    const navigate = useNavigate();
    const formItem: CSSProperties = {
        marginRight: '20px',
        width: '200px'
    }

    useEffect(() => {
        storeservicesListApi()
        storesListApi()
    }, [])

    useEffect(() => {
        storesListApi()
    }, [searchParam])

    const onFinish = (values: any) => {
        setSearchParam({ ...values })
    };

    // 服务范围列表
    let storeservicesListApi = async () => {
        let res = await storeservicesList()
        setScopeServices(res.data.list)
    }
    // 门店列表
    let storesListApi = async () => {
        let res = await storesList(searchParam)
        setStoresListData(res.data.list)
        setCounts(res.data.counts)
    }
    // 单个删除门店
    let storesDeleteApi = async (id: number) => {
        let res = await storesDelete(id)
        storesListApi()
        if (res.errCode == 10000) {
            message.success('删除成功');
        }

    }

    // 批量删除门店
    let storesDeleteAllApi = async () => {
        let res = await storesDeleteAll(ids)
        storesListApi()
        if (res.errCode == 10000) {
            message.success('删除成功');
        }

    }

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[]) => {
            setIds(selectedRowKeys as number[])
        },
    };

    // 搜索
    // 添加修改
    let toStoresAdd = (id: number) => {
        navigate(`/home/stores/add/${id}`)
    }
    const columns: ColumnsType<StoresList> = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '门店',
            dataIndex: 'name',
            render: (text) => (
                <div style={{ color: '#2981ff' }}>{text}</div>
            ),
        },
        {
            title: '地址',
            dataIndex: 'address',
        },
        {
            title: '门店logo',
            dataIndex: 'logo',
            render: (url) => (
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Image
                        width={'50px'}
                        height={'50px'}
                        fallback=""
                        src={rootImg + url}
                    />
                </div>
            ),
        },
        {
            title: '服务范围',
            dataIndex: 'services',
        },
        {
            title: '店主',
            dataIndex: 'username',
        },
        {
            title: '联系电话',
            dataIndex: 'tel',
        },
        {
            title: '营业时间',
            dataIndex: 'address',
            render: (text, record) => (
                <div>
                    {record.startTime}~{record.endTime}
                </div>
            ),
        },
        {
            title: '操作',
            dataIndex: '',
            render: (text, record) => (
                <Space size="middle">
                    <Button type="primary" style={{ backgroundColor: '#67c23a' }} onClick={() => toStoresAdd(record.id)}>
                        修改
                    </Button>
                    <Popconfirm
                        title="是否要删除这条数据"
                        onConfirm={() => storesDeleteApi(record.id)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button type="primary" danger >
                            删除
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },

    ];

    const [storesListData, setStoresListData] = useState<StoresList[]>()

    return (

        <div className='Stores' style={{ width: '100%', paddingBottom: '50px' }}>
            <Title title='公告列表'/>
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Row>
                    <Form.Item
                        label="门店:"
                        name="key"
                        style={formItem}
                        
                    >
                        <Input placeholder='请输入门店名' />
                    </Form.Item>
                    <Form.Item label="服务范围" name='services' style={formItem}>
                        <Select style={{ width: 120 }} placeholder="请选择">
                            {
                                scopeServices.map((item) => {
                                    return <Select.Option value={item.name}>{item.name}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item style={formItem}>
                        <Button type="primary" htmlType="submit" >
                            查询
                        </Button>
                    </Form.Item>
                </Row>
            </Form>

            <Row>
                <Button type="primary" onClick={() => toStoresAdd(0)}>
                    添加
                </Button>
                <Popconfirm
                    title="是否要删除这些数据"
                    onConfirm={() => storesDeleteAllApi}
                    okText="确认"
                    cancelText="取消"
                >
                    <Button type="primary" style={{ marginLeft: '20px' }} danger>
                        批量删除
                    </Button>
                </Popconfirm>

            </Row>

            <Table
                rowKey='id'
                rowSelection={{
                    type: 'checkbox',
                    ...rowSelection,
                }}
                columns={columns}
                pagination={false}
                style={{marginTop: 20}}
                dataSource={storesListData}
            />
            <Pagination
                total={counts}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `共 ${total} 条`}
                style={{ width: '100%', marginTop: '20px', paddingBottom: '20px', justifyContent: 'center' }}
            />
        </div>
    )
}
export default Stores